<template>
  <div class="h-full flex">
    <div
      v-for="(item, index) in navsList"
      :key="item.id"
      :class="
        $cn('text-black w-0 duration-300 animateW overflow-hidden', {
          'w-[20vw]': item.show,
        })
      "
    >
      <div
        @click="() => enterItem(it, index)"
        @mouseenter="() => enterItem(it, index)"
        v-for="(it, idx) in item.list"
        :key="it.id"
        class="cursor-pointer relative group hover:text-theme border-b mx-4 flex items-center after:content-[''] after:absolute after:bottom-0 after:duration-500 hover:after:w-full after:left-0 after:h-px after:bg-theme after:w-0"
      >
        <span
          class="inline-block group-hover:bg-theme w-2 rounded-full h-2 bg-black/30"
        ></span>
        <MyLink to="/" class="p-4 inline-block w-full"> {{ it.name }}</MyLink>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "WebNavItem",
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import { debounce } from "lodash-es";
const props = defineProps({
  navList: {
    type: Array<any>,
    required: true,
  },
});

const navsList = ref<any[]>([]);

const enterItem = (item: any, index: number) => {
  // console.log(navsList.value)
  navsList.value.forEach((it, idx) => {
    if (idx > index) {
      it.show = false;
    }
  });
  if (item.children && item.children.length > 0) {
    navsList.value[index + 1] = {
      show: true,
      list: item.children.map((it: any) => it),
    };
    navsList.value.forEach((it, idx) => {
      if (idx < index + 1) {
        it.show = true;
      }
    });
  }
};
watch(
  () => props.navList,
  (nv) => {
    navsList.value = [
      {
        show: true,
        list: props.navList.map((it) => it),
      },
    ];
  },
  {
    immediate: true,
  }
);
onMounted(() => {});
</script>
<style lang="scss" scoped>
.animateW {
  animation: aniW 0.5s ease;
  @keyframes aniW {
    from {
      opacity: 0;
      width: 0;
    }
    to {
    }
  }
}
</style>
